<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				width: 100%;
				height: 100vh;
				
			}
			
			.w {
				position: relative;
				width: 800px;
				
				margin: 0 auto;
				
			}
			li {
				list-style-type: none;
			}
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="w">
				<div class="touxiang">
					
				</div>
				<div class="title">
					<h1>JAVA实训团队写作简单案例</h1>
					<div class="xiaoren">
						<a href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
						<a href="#" class="names">张三</a>
						<div class="xiaoren_manu">
							<ul>
								<li><a href="#">个人信息</a></li>
								<p class="fenge"></p>
								<li><a href="#">注销</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="cebianlan">
					<ul>
						<li><a href="#">商品管理</a></li>
						<li><a href="#">用户管理</a></li>
						<li><a href="#">权限管理</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="management">
			<div class="w">
				<div class="add">
					<a href="#">新增商品</a>
					<input type="text" name="" id="" value="" placeholder="请输入商品名称，以进行模糊查找"/>
				</div>
				<div class="list_one">
					<div class="shangpin">
						
					</div>
					<div class="shangpin">
						
					</div>
					<div class="shangpin">
						
					</div>
				</div>
			</div>	
		</div>
		
		<script type="text/javascript">
			var xiaoren = document.querySelector('.xiaoren');
			var xiaoren_manu = document.querySelector('.xiaoren_manu');
			xiaoren.addEventListener('click',function(){
				xiaoren_manu.style.display = 'block';
			})
			xiaoren.addEventListener('mouseleave',function(){
				xiaoren_manu.style.display = 'none';
			})
		</script>
	</body>
</html>
